<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
        <title>XK-Editor</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.css" integrity="sha384-9eLZqc9ds8eNjO3TmqPeYcDj8n+Qfa4nuSiGYa6DjLNcv9BtN69ZIulL9+8CqC9Y" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
        <link href="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css" rel="stylesheet" type="text/css">
        <style>
.task-list-item { list-style-type: none; } .task-list-item-checkbox { margin-left: -20px; vertical-align: middle; }
</style>
        <style>
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', 'Ubuntu', 'Droid Sans', sans-serif;
                font-size: 14px;
                line-height: 1.6;
            }
        </style>
        
        <script src="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js"></script>
    </head>
    <body>
        <img class="graffiti" id="canvas-1" src="file:///static/bg.jpg">
<h1 id="xk-editor">XK-Editor</h1>
<blockquote>
<p>一个支持富文本和Markdown的编辑器</p>
</blockquote>
<p><img src="https://img.shields.io/github/release/syfxlin/xkeditor.svg?label=Version&amp;style=flat-square" alt="Version"> <img src="https://img.shields.io/badge/Author-Otstar Lin-blue.svg?style=flat-square" alt="Author"> <img src="https://img.shields.io/github/license/syfxlin/xkeditor.svg?style=flat-square" alt="Lincense"> <img src="https://img.shields.io/github/issues/syfxlin/xkeditor.svg?style=flat-square" alt=""></p>
<h2 id="%E7%AE%80%E4%BB%8B-introduction">简介 Introduction</h2>
<p><code>XK-Editor</code> = <code>Vue2.0</code> + <code>Ace</code> + <code>TinyMCE</code>;</p>
<p>XK-Editor支持富文本编辑和Markdown，同时可以在Markdown和HTML互转，满足各种人的需求。</p>
<h2 id="%E7%89%B9%E6%80%A7-feature">特性 Feature</h2>
<ul>
<li>[两种编辑器] 支持富文本编辑和Markdown编辑</li>
<li>[两种格式互转] 支持Markdown和HTML互转</li>
<li>[打字机模式] 支持打字机模式，编辑时无需使用鼠标滚轮，并可调节定位位置，满足各种屏幕和使用者的需求</li>
<li>[下载] 支持导出下载Markdown和HTML格式的文件</li>
<li>[即时保存] 支持即时保存到浏览器，无惧网络波动</li>
<li>[移动端优化] 优化移动端的编辑体验，支持惯性滚动，并默认关闭实时预览</li>
<li>[滚动绑定] 支持双向/单向滚动绑定，使预览能够跟随输入</li>
<li>[树形TOC] 目录可折叠，不用再翻阅很久来定位</li>
<li>[自定义主题] 支持自定义主题，可以通过替换CSS来更换显示样式</li>
<li>[Emoji表情] 支持Github语法的表情<code>:smile:</code></li>
<li>[Task lists] 支持创建Task列表</li>
<li>[TeX公式] 支持插入KaTex公式</li>
<li>[流程图/时序图/甘特图] 支持mermaid语法编写各种图</li>
<li>[解析HTML] 支持解析各种HTML标签，并支持过滤标签</li>
<li>[独有的扩展语法] 支持通过<code>[text]{style|label}</code>的方式解析文字</li>
<li>[自动补全] 支持语法自动补全</li>
<li>[图片上传] 支持图片上传</li>
<li>还有多种神奇的功能等待你的发掘。</li>
</ul>
<hr>
<p>[TOC]</p>
<h1 id="heading-1">Heading 1</h1>
<h2 id="heading-2">Heading 2</h2>
<h3 id="heading-3">Heading 3</h3>
<h4 id="heading-4">Heading 4</h4>
<h5 id="heading-5">Heading 5</h5>
<h6 id="heading-6">Heading 6</h6>
<h3 id="%E5%AD%97%E7%AC%A6%E6%95%88%E6%9E%9C%E5%92%8C%E6%A8%AA%E7%BA%BF%E7%AD%89">字符效果和横线等</h3>
<hr>
<p>~删除线~ <em>斜体字</em> <strong>粗体</strong> <strong>粗体</strong> <em><strong>粗斜体</strong></em></p>
<p>上标：X<sub>2</sub>，下标：O<sup>2</sup></p>
<h3 id="%E7%89%B9%E6%9C%89%E8%AF%AD%E6%B3%95">特有语法</h3>
<p>[这是带有CSS的文字]{color:blue}</p>
<p>[这是带有CSS的文字]{background:#ddd|span}</p>
<p>[这是带有CSS的文字]{text-align:center}</p>
<h3 id="%E5%BC%95%E7%94%A8-blockquotes">引用 Blockquotes</h3>
<blockquote>
<p>引用文本 Blockquotes</p>
</blockquote>
<p>中间可以书写其他普通文本</p>
<blockquote>
<p>引用：如果想要插入空白换行<code>即&lt;br /&gt;标签</code>，在插入处先键入两个以上的空格然后回车即可，<a href="http://localhost/">普通链接</a>。</p>
</blockquote>
<h3 id="%E9%94%9A%E7%82%B9%E4%B8%8E%E9%93%BE%E6%8E%A5-links">锚点与链接 Links</h3>
<p><a href="http://localhost/">普通链接</a></p>
<p><a href="http://localhost/" title="普通链接带标题">普通链接带标题</a></p>
<p><a href="#%E9%94%9A%E7%82%B9%E4%B8%8E%E9%93%BE%E6%8E%A5-links">锚点链接</a></p>
<h3 id="%E8%A1%8C%E5%86%85%E4%BB%A3%E7%A0%81-inline-code">行内代码 Inline code</h3>
<p>执行命令：<code>npm install marked</code></p>
<h3 id="%E7%BC%A9%E8%BF%9B%E9%A3%8E%E6%A0%BC">缩进风格</h3>
<p>即缩进四个空格，也做为实现类似 <code>&lt;pre&gt;</code> 预格式化文本 ( Preformatted Text ) 的功能。</p>
<p>预格式化文本：</p>
<pre><code><div>| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |
</div></code></pre>
<h4 id="js%E4%BB%A3%E7%A0%81">JS代码</h4>
<pre><code class="language-javascript"><div>importScripts(<span class="hljs-string">'https://cdn.jsdelivr.net/npm/workbox-cdn@3.6.3/workbox/workbox-sw.js'</span>);
workbox.setConfig({
    <span class="hljs-attr">modulePathPrefix</span>:<span class="hljs-string">'https://cdn.jsdelivr.net/npm/workbox-cdn@3.6.3/workbox/'</span>
});

<span class="hljs-keyword">if</span> (workbox) {
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`Yay! Workbox is loaded ?`</span>);
} <span class="hljs-keyword">else</span> {
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`Boo! Workbox didn't load ?`</span>);
}
</div></code></pre>
<h4 id="html-%E4%BB%A3%E7%A0%81-html-codes">HTML 代码 HTML codes</h4>
<pre><code class="language-html"><div><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">mate</span> <span class="hljs-attr">charest</span>=<span class="hljs-string">"utf-8"</span> /&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Hello world!<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello world!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</div></code></pre>
<h3 id="%E5%9B%BE%E7%89%87-images">图片 Images</h3>
<p><img src="https://www.ixk.me/bg.jpg" alt=""><br>
<img src="https://cn.bing.com/th?id=OHR.CoastalFog_EN-CN6289780759_800x480.jpg" alt=""></p>
<hr>
<h3 id="%E5%88%97%E8%A1%A8-lists">列表 Lists</h3>
<h4 id="%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8-unordered-lists1">无序列表 Unordered Lists1</h4>
<ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
<h4 id="%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8-unordered-lists2">无序列表 Unordered Lists2</h4>
<ul>
<li>列表一</li>
<li>列表二
<ul>
<li>列表二-1</li>
<li>列表二-2</li>
<li>列表二-3</li>
</ul>
</li>
<li>列表三
<ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
</li>
</ul>
<h4 id="%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8-ordered-lists">有序列表 Ordered Lists</h4>
<ol>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
<h4 id="gfm-task-list">GFM task list</h4>
<ul class="contains-task-list">
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox">  GFM task list 1</li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox">  GFM task list 2</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox">  GFM task list 3
<ul class="contains-task-list">
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox">  GFM task list 3-1</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox">  GFM task list 3-2</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox">  GFM task list 3-3</li>
</ul>
</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox">  GFM task list 4
<ul class="contains-task-list">
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox">  GFM task list 4-1</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox">  GFM task list 4-2</li>
</ul>
</li>
</ul>
<hr>
<h3 id="%E7%BB%98%E5%88%B6%E8%A1%A8%E6%A0%BC-tables">绘制表格 Tables</h3>
<table>
<thead>
<tr>
<th>First Header</th>
<th>Second Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Cell</td>
<td>Content Cell</td>
</tr>
<tr>
<td>Content Cell</td>
<td>Content Cell</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Function name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>help()</code></td>
<td>Display the help window.</td>
</tr>
<tr>
<td><code>destroy()</code></td>
<td><strong>Destroy your computer!</strong></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th style="text-align:left">Left-Aligned</th>
<th style="text-align:center">Center Aligned</th>
<th style="text-align:right">Right Aligned</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">col 3 is</td>
<td style="text-align:center">some wordy text</td>
<td style="text-align:right">$1600</td>
</tr>
<tr>
<td style="text-align:left">col 2 is</td>
<td style="text-align:center">centered</td>
<td style="text-align:right">$12</td>
</tr>
<tr>
<td style="text-align:left">zebra stripes</td>
<td style="text-align:center">are neat</td>
<td style="text-align:right">$1</td>
</tr>
</tbody>
</table>
<hr>
<h3 id="emoji%E8%A1%A8%E6%83%85-smiley">Emoji表情 :smiley:</h3>
<p>:smiley:</p>
<h3 id="%E7%A7%91%E5%AD%A6%E5%85%AC%E5%BC%8F-texkatex">科学公式 TeX(KaTeX)</h3>
<p><span class="katex-display"><span class="katex"><span class="katex-mathml"><math><semantics><mrow><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">E=mc^2
</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.68333em;vertical-align:0em;"></span><span class="mord mathdefault" style="margin-right:0.05764em;">E</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height:0.8641079999999999em;vertical-align:0em;"></span><span class="mord mathdefault">m</span><span class="mord"><span class="mord mathdefault">c</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8641079999999999em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span></span></span></span></span></p>
<p><span class="katex-display"><span class="katex"><span class="katex-mathml"><math><semantics><mrow><mi>x</mi><mo>&gt;</mo><mi>y</mi></mrow><annotation encoding="application/x-tex">x &gt; y
</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.5782em;vertical-align:-0.0391em;"></span><span class="mord mathdefault">x</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">&gt;</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height:0.625em;vertical-align:-0.19444em;"></span><span class="mord mathdefault" style="margin-right:0.03588em;">y</span></span></span></span></span></p>
<p><span class="katex-display"><span class="katex"><span class="katex-mathml"><math><semantics><mrow><mo>(</mo><mspace linebreak="newline"></mspace><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mrow><mn>3</mn><mi>x</mi><mo>−</mo><mn>1</mn></mrow><mo>+</mo><mo>(</mo><mn>1</mn><mo>+</mo><mi>x</mi><msup><mo>)</mo><mn>2</mn></msup><mo>)</mo></mrow><annotation encoding="application/x-tex">(\\sqrt{3x-1}+(1+x)^2)
</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em;"></span><span class="mopen">(</span></span><span class="mspace newline"></span><span class="base"><span class="strut" style="height:0.8388800000000001em;vertical-align:-0.19444em;"></span><span class="mord mathdefault">s</span><span class="mord mathdefault" style="margin-right:0.03588em;">q</span><span class="mord mathdefault" style="margin-right:0.02778em;">r</span><span class="mord mathdefault">t</span><span class="mord"><span class="mord">3</span><span class="mord mathdefault">x</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">−</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mord">1</span></span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span></span><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em;"></span><span class="mopen">(</span><span class="mord">1</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span></span><span class="base"><span class="strut" style="height:1.1141079999999999em;vertical-align:-0.25em;"></span><span class="mord mathdefault">x</span><span class="mclose"><span class="mclose">)</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8641079999999999em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mclose">)</span></span></span></span></span></p>
<p><span class="katex-display"><span class="katex"><span class="katex-mathml"><math><semantics><mrow><mspace linebreak="newline"></mspace><mi>s</mi><mi>i</mi><mi>n</mi><mo>(</mo><mspace linebreak="newline"></mspace><mi>a</mi><mi>l</mi><mi>p</mi><mi>h</mi><mi>a</mi><msup><mo>)</mo><mrow><mspace linebreak="newline"></mspace><mi>t</mi><mi>h</mi><mi>e</mi><mi>t</mi><mi>a</mi></mrow></msup><mo>=</mo><mspace linebreak="newline"></mspace><mi>s</mi><mi>u</mi><mi>m</mi><mi mathvariant="normal">_</mi><msup><mrow><mi>i</mi><mo>=</mo><mn>0</mn></mrow><mi>n</mi></msup><mo>(</mo><msup><mi>x</mi><mi>i</mi></msup><mo>+</mo><mspace linebreak="newline"></mspace><mi>c</mi><mi>o</mi><mi>s</mi><mo>(</mo><mi>f</mi><mo>)</mo><mo>)</mo></mrow><annotation encoding="application/x-tex">\\sin(\\alpha)^{\\theta}=\\sum\_{i=0}^{n}(x^i + \\cos(f))
</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="mspace newline"></span><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em;"></span><span class="mord mathdefault">s</span><span class="mord mathdefault">i</span><span class="mord mathdefault">n</span><span class="mopen">(</span></span><span class="mspace newline"></span><span class="base"><span class="strut" style="height:1.149108em;vertical-align:-0.25em;"></span><span class="mord mathdefault">a</span><span class="mord mathdefault" style="margin-right:0.01968em;">l</span><span class="mord mathdefault">p</span><span class="mord mathdefault">h</span><span class="mord mathdefault">a</span><span class="mclose"><span class="mclose">)</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8991079999999999em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mspace mtight newline"></span><span class="mord mathdefault mtight">t</span><span class="mord mathdefault mtight">h</span><span class="mord mathdefault mtight">e</span><span class="mord mathdefault mtight">t</span><span class="mord mathdefault mtight">a</span></span></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mspace newline"></span></span><span class="base"><span class="strut" style="height:1.184664em;vertical-align:-0.31em;"></span><span class="mord mathdefault">s</span><span class="mord mathdefault">u</span><span class="mord mathdefault">m</span><span class="mord" style="margin-right:0.02778em;">_</span><span class="mord"><span class="mord"><span class="mord mathdefault">i</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mord">0</span></span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.7143919999999999em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathdefault mtight">n</span></span></span></span></span></span></span></span></span><span class="mopen">(</span><span class="mord"><span class="mord mathdefault">x</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8746639999999999em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathdefault mtight">i</span></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mspace newline"></span></span><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em;"></span><span class="mord mathdefault">c</span><span class="mord mathdefault">o</span><span class="mord mathdefault">s</span><span class="mopen">(</span><span class="mord mathdefault" style="margin-right:0.10764em;">f</span><span class="mclose">)</span><span class="mclose">)</span></span></span></span></span></p>
<pre><code class="language-math"><div>\\sin(\\alpha)^{\\theta}=\\sum\_{i=0}^{n}(x^i + \\cos(f))
</div></code></pre>
<h3 id="%E6%B5%81%E7%A8%8B%E5%9B%BE">流程图</h3>
<pre><code class="language-flowTD"><div>A--&gt;B;
A--&gt;C;
B--&gt;D;
C--&gt;D;
</div></code></pre>
<h3 id="%E6%97%B6%E5%BA%8F%E5%9B%BE">时序图</h3>
<pre><code class="language-seq"><div>participant Alice
participant Bob
Alice-&gt;John: Hello John, how are you?
loop Healthcheck
    John-&gt;John: Fight against hypochondria
end
Note right of John: Rational thoughts &lt;br/&gt;prevail...
John--&gt;Alice: Great!
John-&gt;Bob: How about you?
Bob--&gt;John: Jolly good!
</div></code></pre>
<h3 id="%E7%94%98%E7%89%B9%E5%9B%BE">甘特图</h3>
<pre><code class="language-gantt"><div>dateFormat  YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison          :crit, done, after des1, 2d
Create tests for parser             :crit, active, 3d
Future task in critical line        :crit, 5d
Create tests for renderer           :2d
Add to mermaid                      :1d
</div></code></pre>

    </body>
    </html>